<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="icon" href="static/images/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
    <link rel="icon" href="static/images/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
    <meta name="keywords" content="响应式后台模板,开源免费后台模板,Bootstrap5后台管理系统模板">
    <meta name="description" content="Bootstrap-Admin基于bootstrap5的免费开源的响应式后台管理模板">
    <meta name="author" content="ajiho">
    <link rel="stylesheet" href="lib/bootstrap-icons/font/bootstrap-icons.css">
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    <link rel="stylesheet" href="static/css/bootstrap-admin.min.css">
    <!--  代码高亮css  -->
    <link rel="stylesheet" href="lib/prismjs/themes/prism-okaidia.css">
    <title>Bootstrap-Admin - 开源免费响应式后台管理系统模板</title>
</head>
<body>

<!--头部导航-->
<ul class="bsa-header">
    <!--   移动端侧边栏toggler(不可删除) -->
    <li>
        <div class="bsa-nav-item bsa-mobile-sidebar-toggler-item">
            <i class="bi bi-list"></i>
        </div>
    </li>
    <!--  搜索框表单部分  -->
    <li>
        <div class="bsa-nav-item bsa-cursor-default bsa-search-form-item">
            <form class="bsa-search-form" action="#">
                <input type="text" class="form-control bsa-search-form-control" name="keyword" aria-label="搜索关键词"
                       placeholder="搜索关键词">
                <button class="bsa-search-submit-btn" type="submit"><i class="bi bi-search"></i></button>
                <button class="bsa-search-close-icon" type="button"><i class="bi bi-x-lg"></i></button>
            </form>
        </div>
    </li>
    <!--  空白占位符(可以让.bsa-header-item左右分布)   -->
    <li class="bsa-spacer"></li>
    <!--  移动端显示的搜索按钮(和搜索框是配套使用)      -->
    <li>
        <div class="bsa-nav-item bsa-mobile-search-toggler-item">
            <i class="bi bi-search"></i>
        </div>
    </li>
    <!--   拓展应用(建议把拓展的连接放在这里,以免破坏头部的整体布局)  -->
    <li class="dropdown">
        <div class="bsa-nav-item" data-bs-toggle="dropdown" data-bs-auto-close="outside">
            <i class="bi bi-grid"></i>
        </div>
        <div class="dropdown-menu dropdown-menu-end p-0">
            <div class="card border-0">
                <div class="card-header bg-white d-flex align-items-center justify-content-between">
                    <span class="bsa-font-15">应用列表</span>
                    <a href="javascript:" class="text-muted bsa-font-13 text-decoration-none">编辑</a>
                </div>
                <div class="card-body p-0">
                    <div class="container-fluid">
                        <div class="row row-cols-3 g-3 p-3">
                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1 bsa-hover"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-height-45 bsa-width-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis2">拓展应用1</div>
                            </a>

                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1 bsa-hover"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-height-45 bsa-width-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis2">拓展应用2</div>
                            </a>

                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1 bsa-hover"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-height-45 bsa-width-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis2">拓展应用3</div>
                            </a>

                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1 bsa-hover"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-height-45 bsa-width-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis2">拓展应用4</div>
                            </a>
                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1 bsa-hover"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-height-45 bsa-width-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis2">拓展应用5</div>
                            </a>
                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1 bsa-hover"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-height-45 bsa-width-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis2">拓展应用6</div>
                            </a>
                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1 bsa-hover"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-height-45 bsa-width-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis2">拓展应用7</div>
                            </a>

                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1 bsa-hover"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-height-45 bsa-width-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis2">拓展应用8</div>
                            </a>

                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1 bsa-hover"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-height-45 bsa-width-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis2">拓展应用9</div>
                            </a>

                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1 bsa-hover"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-height-45 bsa-width-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis2">拓展应用10</div>
                            </a>

                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1 bsa-hover"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-height-45 bsa-width-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis2">拓展应用11</div>
                            </a>

                        </div>
                    </div>
                </div>
                <div class="card-footer text-center bg-white">
                    <a href="javascript:" class="text-muted bsa-font-14 text-decoration-none">查看更多应用</a>
                </div>
            </div>
        </div>
    </li>
    <!--    通知    -->
    <li class="dropdown">
        <div class="bsa-nav-item" data-bs-toggle="dropdown">
            <div class="bsa-header-badge-wrapper">
                <span class="bsa-header-badge">99+</span>
                <i class="bi bi-bell"></i>
            </div>
        </div>
        <div class="dropdown-menu dropdown-menu-end p-0">
            <div class="card border-0">
                <div class="card-header bg-white d-flex align-items-center justify-content-between">
                    <span class="bsa-font-15">通知列表</span>
                    <a href="javascript:" class="text-muted bsa-font-13 text-decoration-none">全部设为已读</a>
                </div>
                <div class="card-body p-0">
                    <a href="javascript:" class="d-flex align-items-center text-decoration-none py-2 px-3 bsa-hover">
                        <div class="d-flex align-items-center justify-content-center bsa-font-20 bsa-height-45 bsa-width-45 rounded-circle bsa-bg-color1 text-white">
                            <i class="bi bi-cart"></i>
                        </div>
                        <div class="d-flex flex-column gap-1 ms-3">
                            <h5 class="text-dark mb-0 bsa-ellipsis">新订单</h5>
                            <div class="text-secondary bsa-ellipsis2">
                                您收到新的订单
                            </div>
                            <div class="small text-muted">10秒前</div>
                        </div>
                    </a>
                    <a href="javascript:" class="d-flex align-items-center text-decoration-none py-2 px-3 bsa-hover">
                        <div class="d-flex align-items-center justify-content-center bsa-font-20 bsa-height-45 bsa-width-45 rounded-circle bsa-bg-color2 text-white">
                            <i class="bi bi-people"></i>
                        </div>
                        <div class="d-flex flex-column gap-1 ms-3">
                            <h5 class="text-dark mb-0 bsa-ellipsis">新增用户</h5>
                            <div class="text-secondary bsa-ellipsis2">
                                100个新用户注册
                            </div>
                            <div class="small text-muted">30分钟前</div>
                        </div>
                    </a>
                    <a href="javascript:" class="d-flex align-items-center text-decoration-none py-2 px-3 bsa-hover">
                        <div class="d-flex align-items-center justify-content-center bsa-font-20 bsa-height-45 bsa-width-45 rounded-circle bsa-bg-color3 text-white">
                            <i class="bi bi-chat-square-dots"></i>
                        </div>
                        <div class="d-flex flex-column gap-1 ms-3">
                            <h5 class="text-dark mb-0 bsa-ellipsis">新的评论</h5>
                            <div class="text-secondary bsa-ellipsis2">
                                您收到客户新的评论
                            </div>
                            <div class="small text-muted">2天前</div>
                        </div>
                    </a>
                    <a href="javascript:" class="d-flex align-items-center text-decoration-none py-2 px-3 bsa-hover">
                        <div class="d-flex align-items-center justify-content-center bsa-font-20 bsa-height-45 bsa-width-45 rounded-circle bsa-bg-color4 text-white">
                            <i class="bi bi-cart-check"></i>
                        </div>
                        <div class="d-flex flex-column gap-1 ms-3">
                            <h5 class="text-dark mb-0 bsa-ellipsis">订单已经发货</h5>
                            <div class="text-secondary bsa-ellipsis2">
                                您的商品已在运送途中
                            </div>
                            <div class="small text-muted">3天前</div>
                        </div>
                    </a>
                    <a href="javascript:" class="d-flex align-items-center text-decoration-none py-2 px-3 bsa-hover">
                        <div class="d-flex align-items-center justify-content-center bsa-font-20 bsa-height-45 bsa-width-45 rounded-circle bsa-bg-color4 text-white">
                            <i class="bi bi-person-workspace"></i>
                        </div>
                        <div class="d-flex flex-column gap-1 ms-3">
                            <h5 class="text-dark mb-0 bsa-ellipsis">新的同事</h5>
                            <div class="text-secondary bsa-ellipsis2">
                                新增3位后台管理工作成员
                            </div>
                            <div class="small text-muted">1周前</div>
                        </div>
                    </a>
                </div>
                <div class="card-footer text-center bg-white">
                    <a href="javascript:" class="text-muted bsa-font-14 text-decoration-none">查看所有通知</a>
                </div>
            </div>
        </div>
    </li>
    <!--    消息    -->
    <li class="dropdown">
        <div class="bsa-nav-item" data-bs-toggle="dropdown">
            <div class="bsa-header-badge-wrapper">
                <span class="bsa-header-badge">9</span>
                <i class="bi bi-chat-left"></i>
            </div>
        </div>
        <div class="dropdown-menu dropdown-menu-end p-0">
            <div class="card border-0">
                <div class="card-header bg-white d-flex align-items-center justify-content-between">
                    <span class="bsa-font-15">消息列表</span>
                    <a href="javascript:" class="text-muted bsa-font-13 text-decoration-none">全部设为已读</a>
                </div>
                <div class="card-body p-0">
                    <a href="javascript:" class="d-flex align-items-center text-decoration-none py-2 px-3 bsa-hover">
                        <img src="https://temp.im/120x120" class="bsa-height-45 bsa-width-45 rounded-circle" alt="头像">
                        <div class="d-flex flex-column gap-1 ms-3">
                            <h5 class="text-dark mb-0 bsa-ellipsis">Jack</h5>
                            <div class="text-secondary bsa-ellipsis2">
                                I'm fine
                            </div>
                            <div class="small text-muted">6分钟前</div>
                        </div>
                    </a>
                    <a href="javascript:" class="d-flex align-items-center text-decoration-none py-2 px-3 bsa-hover">
                        <img src="https://temp.im/120x120" class="bsa-height-45 bsa-width-45 rounded-circle" alt="头像">
                        <div class="d-flex flex-column gap-1 ms-3">
                            <h5 class="text-dark mb-0 bsa-ellipsis">Rose</h5>
                            <div class="text-secondary bsa-ellipsis2">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                            </div>
                            <div class="small text-muted">3小时前</div>
                        </div>
                    </a>
                    <a href="javascript:" class="d-flex align-items-center text-decoration-none py-2 px-3 bsa-hover">
                        <img src="https://temp.im/120x120" class="bsa-height-45 bsa-width-45 rounded-circle" alt="头像">
                        <div class="d-flex flex-column gap-1 ms-3">
                            <h5 class="text-dark mb-0 bsa-ellipsis">Ben</h5>
                            <div class="text-secondary bsa-ellipsis2">
                                Lorem ipsum dolor sit amet, consectetur.
                            </div>
                            <div class="small text-muted">1天前</div>
                        </div>
                    </a>
                    <a href="javascript:" class="d-flex align-items-center text-decoration-none py-2 px-3 bsa-hover">
                        <img src="https://temp.im/120x120" class="bsa-height-45 bsa-width-45 rounded-circle" alt="头像">
                        <div class="d-flex flex-column gap-1 ms-3">
                            <h5 class="text-dark mb-0 bsa-ellipsis">Emily</h5>
                            <div class="text-secondary bsa-ellipsis2">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus accusantium
                                architecto autem corporis, eos illo illum itaque nemo nisi, optio sint vitae?
                                Accusantium dolor eius enim iste laudantium perferendis porro!
                            </div>
                            <div class="small text-muted">3天前</div>
                        </div>
                    </a>
                </div>
                <div class="card-footer text-center bg-white">
                    <a href="javascript:" class="text-muted bsa-font-14 text-decoration-none">查看所有消息</a>
                </div>
            </div>
        </div>
    </li>
    <!--    用户信息    -->
    <li class="dropdown">
        <div class="bsa-nav-item" data-bs-toggle="dropdown">
            <div class="d-flex align-items-center mb-2">
                <img src="https://temp.im/120x120" class="bsa-height-40 bsa-width-40 rounded-circle" alt="用户头像">
                <div class="flex-shrink-0 ms-2 bsa-max-width-150 bsa-user-details">
                    <div class="bsa-font-15 bsa-ellipsis">欲饮琵琶码上催</div>
                    <div class="bsa-font-13 bsa-ellipsis">超级管理员</div>
                </div>
            </div>
        </div>
        <ul class="dropdown-menu dropdown-menu-end">
            <li><a class="dropdown-item" href="javascript:"><i class="bi bi-person me-2"></i>个人资料</a></li>
            <li><a class="dropdown-item" href="javascript:"><i class="bi bi-gear me-2"></i>设置</a></li>
            <li>
                <div class="dropdown-divider"></div>
            </li>
            <li><a class="dropdown-item" href="javascript:"><i class="bi bi-box-arrow-right me-2"></i>退出登录</a>
            </li>
        </ul>
    </li>
</ul>
<!--侧边栏-->
<div class="bsa-sidebar">
    <div class="bsa-sidebar-header">
        <img src="static/images/logo-icon.png" class="bsa-logo-icon" alt="logo-icon">
        <div class="bsa-logo-text">Bootstrap-Admin</div>
    </div>
    <div class="bsa-sidebar-body">
        <ul class="bsa-menu">
            <li>
                <a href="index.html">
                    <i class="bi bi-house"></i>首页
                </a>
            </li>
            <li>
                <a href="javascript:" class="has-children active open">
                    <i class="bi bi-columns-gap"></i>UI组件
                </a>
                <ul>
                    <li>
                        <a href="javascript:" class="has-children">表单</a>
                        <ul>
                            <li><a href="component-form-elements.html">基础元素</a></li>
                            <li><a href="component-form-validations.html">表单验证</a></li>
                            <li><a href="component-form-layouts.html">表单布局</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="javascript:" class="has-children">栏</a>
                        <ul>
                            <li><a href="component-navs.html">导航</a></li>
                            <li><a href="component-navbar.html">导航栏</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="component-tabs.html" class="active">选项卡</a>
                    </li>
                    <li>
                        <a href="component-card.html">卡片</a>
                    </li>
                    <li>
                        <a href="component-button.html">按钮</a>
                    </li>
                    <li>
                        <a href="component-accordion.html">手风琴</a>
                    </li>
                    <li>
                        <a href="component-alert.html">警告框</a>
                    </li>
                    <li>
                        <a href="component-badge.html">徽章</a>
                    </li>
                    <li>
                        <a href="component-breadcrumb.html">面包屑</a>
                    </li>
                    <li>
                        <a href="component-table.html">表格</a>
                    </li>
                    <li>
                        <a href="component-carousel.html">幻灯片</a>
                    </li>
                    <li>
                        <a href="component-collapse.html">折叠</a>
                    </li>
                    <li>
                        <a href="component-dropdowns.html">下拉菜单</a>
                    </li>
                    <li>
                        <a href="component-list-group.html">列表组</a>
                    </li>
                    <li>
                        <a href="component-modal.html">模态框</a>
                    </li>
                    <li>
                        <a href="component-offcanvas.html">抽屉</a>
                    </li>
                    <li>
                        <a href="component-pagination.html">分页</a>
                    </li>
                    <li>
                        <a href="component-placeholders.html">骨架屏</a>
                    </li>
                    <li>
                        <a href="component-popovers.html">气泡</a>
                    </li>
                    <li>
                        <a href="javascript:" class="has-children">进度</a>
                        <ul>
                            <li><a href="component-progress.html">进度条</a></li>
                            <li><a href="component-spinners.html">进度环</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="component-scrollspy.html">滚动监听</a>
                    </li>
                    <li>
                        <a href="component-toasts.html">吐司</a>
                    </li>
                    <li>
                        <a href="component-tooltips.html">提示</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="javascript:" class="has-children">
                    <i class="bi bi-filetype-html"></i>页面
                </a>
                <ul>
                    <li>
                        <a href="page-blank.html">新页面</a>
                    </li>
                    <li>
                        <a href="page-list.html">列表页面</a>
                    </li>
                    <li>
                        <a href="page-add.html">表单新增</a>
                    </li>
                    <li>
                        <a href="page-add2.html">表单新增2</a>
                    </li>
                    <li>
                        <a href="page-login.html">登录页面</a>
                    </li>
                    <li>
                        <a href="page-login2.html">登录页面2</a>
                    </li>
                    <li>
                        <a href="page-comment.html">评论页</a>
                    </li>
                    <li>
                        <a href="page-pricing.html">产品定价</a>
                    </li>
                    <li>
                        <a href="page-lock-screen.html">锁屏页</a>
                    </li>
                    <li>
                        <a href="page-article-list.html">文章列表页</a>
                    </li>
                    <li>
                        <a href="page-products-details.html">商品详情页</a>
                    </li>
                    <li>
                        <a href="page-profile.html">个人资料</a>
                    </li>
                    <li>
                        <a href="page-timeline.html">时间轴</a>
                    </li>
                    <li>
                        <a href="page-error.html">400/500页面</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="javascript:" class="has-children">
                    <i class="bi bi-filetype-js"></i>插件
                </a>
                <ul>
                    <li><a href="plugin-fullcalendar.html">日历</a></li>
                    <li>
                        <a href="javascript:" class="has-children">图表</a>
                        <ul>
                            <li><a href="plugin-chart.html">chart.js</a></li>
                            <li><a href="plugin-echarts.html">echart.js</a></li>
                        </ul>
                    </li>
                    <li><a href="plugin-bootstrap-notify.html">通知插件</a></li>
                    <li><a href="plugin-bootstrap-dialog.html">弹层插件</a></li>
                    <li><a href="plugin-formvalidation.html">表单验证</a></li>
                    <li><a href="plugin-tempus-dominus.html">日期时间选择</a></li>
                    <li><a href="plugin-tinymce.html">富文本编辑器</a></li>
                    <li><a href="plugin-dropzone.html">文件上传</a></li>
                    <li><a href="plugin-croppie.html">头像裁剪</a></li>
                    <li><a href="plugin-ztree.html">树形组件</a></li>
                    <li><a href="plugin-select2.html">select2</a></li>
                </ul>
            </li>
            <li>
                <a href="javascript:" class="has-children">
                    <i class="bi bi-list-nested"></i>多级菜单
                </a>
                <ul>
                    <li><a href="javascript:">一级菜单</a></li>
                    <li>
                        <a href="javascript:" class="has-children">一级菜单</a>
                        <ul>
                            <li><a href="javascript:">二级菜单</a></li>
                            <li>
                                <a href="javascript:" class="has-children">二级菜单</a>
                                <ul>
                                    <li><a href="javascript:">三级菜单</a></li>
                                    <li>
                                        <a href="javascript:" class="has-children">三级菜单</a>
                                        <ul>
                                            <li><a href="javascript:">四级菜单</a></li>
                                            <li><a href="javascript:">四级菜单</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="javascript:" class="has-children">一级菜单</a>
                        <ul>
                            <li><a href="javascript:">二级菜单</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<!--内容区域-->
<div class="bsa-main-wrapper">
    <div class="bsa-main-content">
        <!-- 内容都应该被包裹在此-->
        <div class="card border-0 shadow-sm">
            <div class="container-fluid">
                <div class="row row-cols-1 row-cols-sm-1 row-cols-md-1 row-cols-lg-2 g-2">
                    <div class="col">
                        <div class="card-body">
                            <h5 class="card-title">基本示例</h5>
                            <div class="dropdown-divider mb-3"></div>
                            <div class="bsa-component">
                                <ul class="nav nav-tabs" id="myTab" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link active" id="home-tab" data-bs-toggle="tab"
                                                data-bs-target="#home" type="button" role="tab" aria-controls="home"
                                                aria-selected="true">Home
                                        </button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="profile-tab" data-bs-toggle="tab"
                                                data-bs-target="#profile" type="button" role="tab"
                                                aria-controls="profile" aria-selected="false">Profile
                                        </button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="contact-tab" data-bs-toggle="tab"
                                                data-bs-target="#contact" type="button" role="tab"
                                                aria-controls="contact" aria-selected="false">Contact
                                        </button>
                                    </li>
                                </ul>
                                <div class="tab-content" id="myTabContent">
                                    <div class="tab-pane fade show active" id="home" role="tabpanel"
                                         aria-labelledby="home-tab">
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur
                                        consequatur, doloremque id maxime odio ratione sapiente. At dicta dolor eius
                                        excepturi harum hic, id illum magni praesentium quam quisquam sunt.
                                    </div>
                                    <div class="tab-pane fade" id="profile" role="tabpanel"
                                         aria-labelledby="profile-tab">
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque eligendi est eum
                                        illum praesentium sed vitae voluptatibus? Autem fuga, fugiat itaque molestias
                                        quaerat reiciendis vitae. Cupiditate facere illo nihil sequi?
                                    </div>
                                    <div class="tab-pane fade" id="contact" role="tabpanel"
                                         aria-labelledby="contact-tab">Lorem ipsum dolor sit amet, consectetur
                                        adipisicing elit. Aperiam architecto autem dolor ducimus enim explicabo facere
                                        natus odit saepe sed tempore tenetur, totam. Dolores facilis fugiat ipsam
                                        mollitia nisi placeat.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card-body">
                            <h5 class="card-title">primary</h5>
                            <div class="dropdown-divider mb-3"></div>
                            <div class="bsa-component">
                                <ul class="nav nav-tabs bsa-nav-primary" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link active" data-bs-toggle="tab" href="#primaryhome" role="tab"
                                           aria-selected="true">
                                            <div class="d-flex align-items-center">
                                                <div class="tab-icon"><i class='bi bi-house bsa-font-20 me-1'></i>
                                                </div>
                                                <div class="tab-title">Home</div>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link" data-bs-toggle="tab" href="#primaryprofile" role="tab"
                                           aria-selected="false">
                                            <div class="d-flex align-items-center">
                                                <div class="tab-icon"><i
                                                        class='bi bi-person-lines-fill  bsa-font-20 me-1'></i>
                                                </div>
                                                <div class="tab-title">Profile</div>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link" data-bs-toggle="tab" href="#primarycontact" role="tab"
                                           aria-selected="false">
                                            <div class="d-flex align-items-center">
                                                <div class="tab-icon"><i class='bi bi-at  bsa-font-20 me-1'></i>
                                                </div>
                                                <div class="tab-title">Contact</div>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                                <div class="tab-content py-3">
                                    <div class="tab-pane fade show active" id="primaryhome" role="tabpanel">
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus blanditiis
                                        dolores inventore ipsum labore mollitia
                                        nostrum tempore, temporibus velit voluptas. A ad asperiores consequatur dicta,
                                        eveniet fuga illum natus rerum.
                                    </div>
                                    <div class="tab-pane fade" id="primaryprofile" role="tabpanel">
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab corporis cumque
                                        dolore, ea eius eveniet fuga fugiat in
                                        ipsum maxime nihil, numquam perferendis perspiciatis placeat quam quis repellat
                                        sed velit!
                                    </div>
                                    <div class="tab-pane fade" id="primarycontact" role="tabpanel">
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad,
                                        consequatur dicta expedita hic impedit,
                                        inventore ipsum magni neque nobis odit, possimus quis quisquam similique veniam.
                                        Aspernatur assumenda eum voluptas.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card-body">
                            <h5 class="card-title">danger</h5>
                            <div class="dropdown-divider mb-3"></div>
                            <div class="bsa-component">
                                <ul class="nav nav-tabs bsa-nav-danger" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link active" data-bs-toggle="tab" href="#dangerhome" role="tab"
                                           aria-selected="true">
                                            <div class="d-flex align-items-center">
                                                <div class="tab-icon"><i class='bi bi-house bsa-font-20 me-1'></i>
                                                </div>
                                                <div class="tab-title">Home</div>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link" data-bs-toggle="tab" href="#dangerprofile" role="tab"
                                           aria-selected="false">
                                            <div class="d-flex align-items-center">
                                                <div class="tab-icon"><i
                                                        class='bi bi-person-lines-fill  bsa-font-20 me-1'></i>
                                                </div>
                                                <div class="tab-title">Profile</div>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link" data-bs-toggle="tab" href="#dangercontact" role="tab"
                                           aria-selected="false">
                                            <div class="d-flex align-items-center">
                                                <div class="tab-icon"><i class='bi bi-at  bsa-font-20 me-1'></i>
                                                </div>
                                                <div class="tab-title">Contact</div>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                                <div class="tab-content py-3">
                                    <div class="tab-pane fade show active" id="dangerhome" role="tabpanel">
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus blanditiis
                                        dolores inventore ipsum labore mollitia
                                        nostrum tempore, temporibus velit voluptas. A ad asperiores consequatur dicta,
                                        eveniet fuga illum natus rerum.
                                    </div>
                                    <div class="tab-pane fade" id="dangerprofile" role="tabpanel">
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab corporis cumque
                                        dolore, ea eius eveniet fuga fugiat in
                                        ipsum maxime nihil, numquam perferendis perspiciatis placeat quam quis repellat
                                        sed velit!
                                    </div>
                                    <div class="tab-pane fade" id="dangercontact" role="tabpanel">
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad,
                                        consequatur dicta expedita hic impedit,
                                        inventore ipsum magni neque nobis odit, possimus quis quisquam similique veniam.
                                        Aspernatur assumenda eum voluptas.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card-body">
                            <h5 class="card-title">success</h5>
                            <div class="dropdown-divider mb-3"></div>
                            <div class="bsa-component">
                                <ul class="nav nav-tabs bsa-nav-success" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link active" data-bs-toggle="tab" href="#successhome" role="tab"
                                           aria-selected="true">
                                            <div class="d-flex align-items-center">
                                                <div class="tab-icon"><i class='bi bi-house bsa-font-20 me-1'></i>
                                                </div>
                                                <div class="tab-title">Home</div>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link" data-bs-toggle="tab" href="#successprofile" role="tab"
                                           aria-selected="false">
                                            <div class="d-flex align-items-center">
                                                <div class="tab-icon"><i
                                                        class='bi bi-person-lines-fill  bsa-font-20 me-1'></i>
                                                </div>
                                                <div class="tab-title">Profile</div>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link" data-bs-toggle="tab" href="#successcontact" role="tab"
                                           aria-selected="false">
                                            <div class="d-flex align-items-center">
                                                <div class="tab-icon"><i class='bi bi-at  bsa-font-20 me-1'></i>
                                                </div>
                                                <div class="tab-title">Contact</div>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                                <div class="tab-content py-3">
                                    <div class="tab-pane fade show active" id="successhome" role="tabpanel">
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus blanditiis
                                        dolores inventore ipsum labore mollitia
                                        nostrum tempore, temporibus velit voluptas. A ad asperiores consequatur dicta,
                                        eveniet fuga illum natus rerum.
                                    </div>
                                    <div class="tab-pane fade" id="successprofile" role="tabpanel">
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab corporis cumque
                                        dolore, ea eius eveniet fuga fugiat in
                                        ipsum maxime nihil, numquam perferendis perspiciatis placeat quam quis repellat
                                        sed velit!
                                    </div>
                                    <div class="tab-pane fade" id="successcontact" role="tabpanel">
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad,
                                        consequatur dicta expedita hic impedit,
                                        inventore ipsum magni neque nobis odit, possimus quis quisquam similique veniam.
                                        Aspernatur assumenda eum voluptas.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card-body">
                            <h5 class="card-title">warning</h5>
                            <div class="dropdown-divider mb-3"></div>
                            <div class="bsa-component">
                                <ul class="nav nav-tabs bsa-nav-warning" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link active" data-bs-toggle="tab" href="#warninghome" role="tab"
                                           aria-selected="true">
                                            <div class="d-flex align-items-center">
                                                <div class="tab-icon"><i class='bi bi-house bsa-font-20 me-1'></i>
                                                </div>
                                                <div class="tab-title">Home</div>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link" data-bs-toggle="tab" href="#warningprofile" role="tab"
                                           aria-selected="false">
                                            <div class="d-flex align-items-center">
                                                <div class="tab-icon"><i
                                                        class='bi bi-person-lines-fill  bsa-font-20 me-1'></i>
                                                </div>
                                                <div class="tab-title">Profile</div>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link" data-bs-toggle="tab" href="#warningcontact" role="tab"
                                           aria-selected="false">
                                            <div class="d-flex align-items-center">
                                                <div class="tab-icon"><i class='bi bi-at  bsa-font-20 me-1'></i>
                                                </div>
                                                <div class="tab-title">Contact</div>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                                <div class="tab-content py-3">
                                    <div class="tab-pane fade show active" id="warninghome" role="tabpanel">
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus blanditiis
                                        dolores inventore ipsum labore mollitia
                                        nostrum tempore, temporibus velit voluptas. A ad asperiores consequatur dicta,
                                        eveniet fuga illum natus rerum.
                                    </div>
                                    <div class="tab-pane fade" id="warningprofile" role="tabpanel">
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab corporis cumque
                                        dolore, ea eius eveniet fuga fugiat in
                                        ipsum maxime nihil, numquam perferendis perspiciatis placeat quam quis repellat
                                        sed velit!
                                    </div>
                                    <div class="tab-pane fade" id="warningcontact" role="tabpanel">
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad,
                                        consequatur dicta expedita hic impedit,
                                        inventore ipsum magni neque nobis odit, possimus quis quisquam similique veniam.
                                        Aspernatur assumenda eum voluptas.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card-body">
                            <h5 class="card-title">primary-药丸</h5>
                            <div class="dropdown-divider mb-3"></div>
                            <div class="bsa-component">

                                <ul class="nav nav-pills mb-3" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link active" data-bs-toggle="pill" href="#primary-pills-home"
                                           role="tab" aria-selected="true">
                                            <div class="d-flex align-items-center">
                                                <div class="tab-icon"><i class='bi bi-house bsa-font-20 me-1'></i>
                                                </div>
                                                <div class="tab-title">Home</div>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link" data-bs-toggle="pill" href="#primary-pills-profile"
                                           role="tab" aria-selected="false">
                                            <div class="d-flex align-items-center">
                                                <div class="tab-icon"><i
                                                        class='bi bi-person-lines-fill  bsa-font-20 me-1'></i>
                                                </div>
                                                <div class="tab-title">Profile</div>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link" data-bs-toggle="pill" href="#primary-pills-contact"
                                           role="tab" aria-selected="false">
                                            <div class="d-flex align-items-center">
                                                <div class="tab-icon"><i class='bi bi-at  bsa-font-20 me-1'></i>
                                                </div>
                                                <div class="tab-title">Contact</div>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                                <div class="tab-content" id="pills-tabContent">
                                    <div class="tab-pane fade show active" id="primary-pills-home" role="tabpanel">
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus blanditiis
                                        dolores inventore ipsum labore mollitia
                                        nostrum tempore, temporibus velit voluptas. A ad asperiores consequatur dicta,
                                        eveniet fuga illum natus rerum.
                                    </div>
                                    <div class="tab-pane fade" id="primary-pills-profile" role="tabpanel">
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab corporis cumque
                                        dolore, ea eius eveniet fuga fugiat in
                                        ipsum maxime nihil, numquam perferendis perspiciatis placeat quam quis repellat
                                        sed velit!
                                    </div>
                                    <div class="tab-pane fade" id="primary-pills-contact" role="tabpanel">
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad,
                                        consequatur dicta expedita hic impedit,
                                        inventore ipsum magni neque nobis odit, possimus quis quisquam similique veniam.
                                        Aspernatur assumenda eum voluptas.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card-body">
                            <h5 class="card-title">Danger-药丸</h5>
                            <div class="dropdown-divider mb-3"></div>
                            <div class="bsa-component">
                                <ul class="nav nav-pills bsa-nav-pills-danger mb-3" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link active" data-bs-toggle="pill" href="#danger-pills-home"
                                           role="tab" aria-selected="true">
                                            <div class="d-flex align-items-center">
                                                <div class="tab-icon"><i class='bi bi-house bsa-font-20 me-1'></i>
                                                </div>
                                                <div class="tab-title">Home</div>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link" data-bs-toggle="pill" href="#danger-pills-profile"
                                           role="tab" aria-selected="false">
                                            <div class="d-flex align-items-center">
                                                <div class="tab-icon"><i
                                                        class='bi bi-person-lines-fill  bsa-font-20 me-1'></i>
                                                </div>
                                                <div class="tab-title">Profile</div>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link" data-bs-toggle="pill" href="#danger-pills-contact"
                                           role="tab" aria-selected="false">
                                            <div class="d-flex align-items-center">
                                                <div class="tab-icon"><i class='bi bi-at  bsa-font-20 me-1'></i>
                                                </div>
                                                <div class="tab-title">Contact</div>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                                <div class="tab-content" id="danger-pills-tabContent">
                                    <div class="tab-pane fade show active" id="danger-pills-home" role="tabpanel">
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus blanditiis
                                        dolores inventore ipsum labore mollitia
                                        nostrum tempore, temporibus velit voluptas. A ad asperiores consequatur dicta,
                                        eveniet fuga illum natus rerum.
                                    </div>
                                    <div class="tab-pane fade" id="danger-pills-profile" role="tabpanel">
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab corporis cumque
                                        dolore, ea eius eveniet fuga fugiat in
                                        ipsum maxime nihil, numquam perferendis perspiciatis placeat quam quis repellat
                                        sed velit!
                                    </div>
                                    <div class="tab-pane fade" id="danger-pills-contact" role="tabpanel">
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad,
                                        consequatur dicta expedita hic impedit,
                                        inventore ipsum magni neque nobis odit, possimus quis quisquam similique veniam.
                                        Aspernatur assumenda eum voluptas.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card-body">
                            <h5 class="card-title">Success-药丸</h5>
                            <div class="dropdown-divider mb-3"></div>
                            <div class="bsa-component">
                                <ul class="nav nav-pills bsa-nav-pills-success mb-3" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link active" data-bs-toggle="pill" href="#success-pills-home"
                                           role="tab" aria-selected="true">
                                            <div class="d-flex align-items-center">
                                                <div class="tab-icon"><i class='bi bi-house bsa-font-20 me-1'></i>
                                                </div>
                                                <div class="tab-title">Home</div>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link" data-bs-toggle="pill" href="#success-pills-profile"
                                           role="tab" aria-selected="false">
                                            <div class="d-flex align-items-center">
                                                <div class="tab-icon"><i
                                                        class='bi bi-person-lines-fill  bsa-font-20 me-1'></i>
                                                </div>
                                                <div class="tab-title">Profile</div>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link" data-bs-toggle="pill" href="#success-pills-contact"
                                           role="tab" aria-selected="false">
                                            <div class="d-flex align-items-center">
                                                <div class="tab-icon"><i class='bi bi-at  bsa-font-20 me-1'></i>
                                                </div>
                                                <div class="tab-title">Contact</div>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                                <div class="tab-content">
                                    <div class="tab-pane fade show active" id="success-pills-home" role="tabpanel">
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus blanditiis
                                        dolores inventore ipsum labore mollitia
                                        nostrum tempore, temporibus velit voluptas. A ad asperiores consequatur dicta,
                                        eveniet fuga illum natus rerum.
                                    </div>
                                    <div class="tab-pane fade" id="success-pills-profile" role="tabpanel">
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab corporis cumque
                                        dolore, ea eius eveniet fuga fugiat in
                                        ipsum maxime nihil, numquam perferendis perspiciatis placeat quam quis repellat
                                        sed velit!
                                    </div>
                                    <div class="tab-pane fade" id="success-pills-contact" role="tabpanel">
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad,
                                        consequatur dicta expedita hic impedit,
                                        inventore ipsum magni neque nobis odit, possimus quis quisquam similique veniam.
                                        Aspernatur assumenda eum voluptas.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card-body">
                            <h5 class="card-title">Warning-药丸</h5>
                            <div class="dropdown-divider mb-3"></div>
                            <div class="bsa-component">
                                <ul class="nav nav-pills bsa-nav-pills-warning mb-3" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link active" data-bs-toggle="pill" href="#warning-pills-home"
                                           role="tab" aria-selected="true">
                                            <div class="d-flex align-items-center">
                                                <div class="tab-icon"><i class='bi bi-house bsa-font-20 me-1'></i>
                                                </div>
                                                <div class="tab-title">Home</div>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link" data-bs-toggle="pill" href="#warning-pills-profile"
                                           role="tab" aria-selected="false">
                                            <div class="d-flex align-items-center">
                                                <div class="tab-icon"><i
                                                        class='bi bi-person-lines-fill  bsa-font-20 me-1'></i>
                                                </div>
                                                <div class="tab-title">Profile</div>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link" data-bs-toggle="pill" href="#warning-pills-contact"
                                           role="tab" aria-selected="false">
                                            <div class="d-flex align-items-center">
                                                <div class="tab-icon"><i class='bi bi-at  bsa-font-20 me-1'></i>
                                                </div>
                                                <div class="tab-title">Contact</div>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                                <div class="tab-content">
                                    <div class="tab-pane fade show active" id="warning-pills-home" role="tabpanel">
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus blanditiis
                                        dolores inventore ipsum labore mollitia
                                        nostrum tempore, temporibus velit voluptas. A ad asperiores consequatur dicta,
                                        eveniet fuga illum natus rerum.
                                    </div>
                                    <div class="tab-pane fade" id="warning-pills-profile" role="tabpanel">
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab corporis cumque
                                        dolore, ea eius eveniet fuga fugiat in
                                        ipsum maxime nihil, numquam perferendis perspiciatis placeat quam quis repellat
                                        sed velit!
                                    </div>
                                    <div class="tab-pane fade" id="warning-pills-contact" role="tabpanel">
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad,
                                        consequatur dicta expedita hic impedit,
                                        inventore ipsum magni neque nobis odit, possimus quis quisquam similique veniam.
                                        Aspernatur assumenda eum voluptas.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card-body">
                            <h5 class="card-title">垂直选项卡</h5>
                            <div class="dropdown-divider mb-3"></div>
                            <div class="bsa-component">
                                <div class="d-flex align-items-start">
                                    <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist"
                                         aria-orientation="vertical">
                                        <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill"
                                                data-bs-target="#v-pills-home" type="button" role="tab"
                                                aria-controls="v-pills-home" aria-selected="true">Home
                                        </button>
                                        <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill"
                                                data-bs-target="#v-pills-profile" type="button" role="tab"
                                                aria-controls="v-pills-profile" aria-selected="false">Profile
                                        </button>
                                        <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill"
                                                data-bs-target="#v-pills-messages" type="button" role="tab"
                                                aria-controls="v-pills-messages" aria-selected="false">Messages
                                        </button>
                                        <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill"
                                                data-bs-target="#v-pills-settings" type="button" role="tab"
                                                aria-controls="v-pills-settings" aria-selected="false">Settings
                                        </button>
                                    </div>
                                    <div class="tab-content" id="v-pills-tabContent">
                                        <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel"
                                             aria-labelledby="v-pills-home-tab">
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab adipisci
                                            aliquam maiores placeat vero! Excepturi, id illo libero mollitia sequi
                                            veritatis vitae. Aperiam architecto autem et fugit officiis sapiente
                                            voluptate.
                                        </div>
                                        <div class="tab-pane fade" id="v-pills-profile" role="tabpanel"
                                             aria-labelledby="v-pills-profile-tab">
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet animi aperiam
                                            asperiores consequuntur, dignissimos distinctio ea eius excepturi, ipsa
                                            ipsam neque provident ratione rem rerum sit tempore voluptate. Hic,
                                            voluptatibus.
                                        </div>
                                        <div class="tab-pane fade" id="v-pills-messages" role="tabpanel"
                                             aria-labelledby="v-pills-messages-tab">
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad amet
                                            consequuntur, dolorem facere iure laudantium maiores mollitia obcaecati quia
                                            vero? Architecto assumenda dolor dolorem dolores, eaque error molestiae nemo
                                            nisi!
                                        </div>
                                        <div class="tab-pane fade" id="v-pills-settings" role="tabpanel"
                                             aria-labelledby="v-pills-settings-tab">Lorem ipsum dolor sit amet,
                                            consectetur adipisicing elit. A ab accusamus architecto debitis dolorem in
                                            ipsam, molestias mollitia, quibusdam repudiandae, ut vero. Aperiam fuga
                                            fugiat molestiae obcaecati, pariatur praesentium repudiandae!
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>


        </div>
    </div>
</div>
<!--调色板-->
<div class="bsa-switcher">
    <div class="bsa-switcher-toggler-btn">
        <div class="bsa-switcher-toggler-icon">
            <i class="bi bi-gear"></i>
        </div>
    </div>
    <div class="bsa-switcher-header">
        <h5 class="bsa-switcher-header-title">自定义主题</h5>
        <button type="button" class="btn-close text-reset bsa-switcher-toggler-btn"></button>
    </div>
    <div class="bsa-switcher-body">
        <div class="row row-cols-1 g-4">
            <div class="col">
                <h6>头部颜色</h6>
                <hr>
                <div class="bsa-headercolor-wrap">
                    <div class="row row-cols-auto g-3">
                        <div class="col">
                            <div class="headercolor0"></div>
                        </div>
                        <div class="col">
                            <div class="headercolor1"></div>
                        </div>
                        <div class="col">
                            <div class="headercolor2"></div>
                        </div>
                        <div class="col">
                            <div class="headercolor3"></div>
                        </div>
                        <div class="col">
                            <div class="headercolor4"></div>
                        </div>
                        <div class="col">
                            <div class="headercolor5"></div>
                        </div>
                        <div class="col">
                            <div class="headercolor6"></div>
                        </div>
                        <div class="col">
                            <div class="headercolor7"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col">
                <h6>侧边栏颜色</h6>
                <hr>
                <div class="bsa-sidebarcolor-wrap">
                    <div class="row row-cols-auto g-3">
                        <div class="col">
                            <div class="sidebarcolor0"></div>
                        </div>
                        <div class="col">
                            <div class="sidebarcolor1"></div>
                        </div>
                        <div class="col">
                            <div class="sidebarcolor2"></div>
                        </div>
                        <div class="col">
                            <div class="sidebarcolor3"></div>
                        </div>
                        <div class="col">
                            <div class="sidebarcolor4"></div>
                        </div>
                        <div class="col">
                            <div class="sidebarcolor5"></div>
                        </div>
                        <div class="col">
                            <div class="sidebarcolor6"></div>
                        </div>
                        <div class="col">
                            <div class="sidebarcolor7"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--代码高亮js-->
<script src="lib/prismjs/prism.js"></script>
<script src="static/js/bootstrap.bundle.min.js"></script>
<script src="static/js/bootstrap-admin.min.js"></script>


</body>
</html>